.wf-button{
  /* 变量 定义 */
  --wf-button-font-weight:var(--wf-font-weight-primary);
  --wf-button-outline-color:var(--wf-border-color);
  --wf-button-active-color:var(--wf-text-color-primary);

  /* 三种结构的 颜色： 文字 , 背景颜色 , 边框 */

  /* 普通状态 */
  --wf-button-text-color:var(--wf-text-color-regular);
  --wf-button-bg-color:var(--wf-fill-color-blank);
  --wf-button-border-color:var(--wf-border-color);
  
  /* 禁用状态 */
  --wf-button-disabled-text-color:var(--wf-disabled-text-color);
  --wf-button-disabled-bg-color:var(--wf-fill-color-blank);
  --wf-button-disabled-border-color:var(--wf-border-color-light);

  /* 悬停状态 */
  --wf-button-hover-text-color:var(--wf-color-primary);
  --wf-button-hover-bg-color:var(--wf-color-primary-light-9);
  --wf-button-hover-border-color:var(--wf-color-primary-light-7);

  /* 触发状态 */
  --wf-button-active-text-color:var(--wf-button-hover-text-color);
  --wf-button-active-bg-color:var(--wf-button-hover-bg-color);
  --wf-button-active-border-color:var(--wf-color-primary);
}
.wf-button{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--wf-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: var(--wf-button-font-weight);
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: var(--wf-button-bg-color);
  border: var(--wf-border);
  border-color: var(--wf-button-border-color);
  padding: 8px 15px;
  font-size: var(--wf-font-size-base);
  border-radius: var(--wf-border-radius-base);
  /* 匹配挨着的 两个 class 为 wf-button 的组件 */
  & + &{
    margin-left: 12px;
  }
  /* 匹配所有class 为 wf-icon 和 span挨着的组件 */
  [class *= wf-icon] + span{
    margin-left: 6px;
  }

  /* 特殊的样式 */

  /* [`wf-button--${type}`]:type,
    [`wf-button--${size}`]:size,
    [`wf-button--${nativeType}`]:nativeType,
    'is-plain':plain,
    'is-round':round,
    'is-circle':circle,
    'is-disabled':disabled, */

    
    &.is-plain{
      --wf-button-hover-text-color:var(--wf-color-primary);
      --wf-button-hover-bg-color:var(--wf-fill-color-blank);
      --wf-button-hover-border-color:var(--wf-color-primary);
    }
    &.is-round{
      border-radius: var(--wf-border-radius-round);
    }
    &.is-circle{
      border-radius: 50%;
      padding: 8px;
    }
    &.is-disabled,&.is-disabled:focus,&.is-disabled:hover,
    &[disabled],&[disabled]:hover,&[disabled]:focus
    {
      color: var(--wf-button-disabled-text-color);
      cursor: not-allowed;
      background-color: var(--wf-button-disabled-bg-color);
      border-color: var(--wf-button-disabled-border-color);
    }
    &:hover,
    &:focus{
      color: var(--wf-button-hover-text-color);
      border-color: var(--wf-button-hover-border-color);
      background-color: var(--wf-button-hover-bg-color);
      outline: none;
    }
    &:active{
      color: var(--wf-button-active-text-color);
      border-color: var(--wf-button-active-border-color);
      background-color: var(--wf-button-active-bg-color);
      outline: none;
    }


}
/* 用 each 简化代码 */
@each $val in primary,success,warning,info,danger{
  /* 类样式 */
  .wf-button--$(val){
    /* 在具体的类型里面 又 覆盖相应的 按钮的属性 */
    --wf-button-text-color:var(--wf-color-white);
    --wf-button-bg-color:var(--wf-color-$(val));
    --wf-button-border-color:var(--wf-color-$(val));
    --wf-button-outline-color:var(--wf-color-$(val)-light-5);
    
    --wf-button-hover-text-color:var(--wf-color-white);
    --wf-button-hover-bg-color:var(--wf-color-$(val)-light-3);
    --wf-button-hover-border-color:var(--wf-color-$(val)-light-3);

    --wf-button-active-color:var(--wf-color-$(val)-dark-2);
    --wf-button-active-bg-color:var(--wf-color-$(val)-dark-2);
    --wf-button-active-border-color:var(--wf-color-$(val)-dark-2);

    --wf-button-disabled-color:var(--wf-color-white);
    --wf-button-disabled-bg-color:var(--wf-color-$(val)-light-5);
    --wf-button-disabled-border-color:var(--wf-color-$(val)-light-5);
  }
  .wf-button-$(val).is-plain{
    --wf-button-text-color:var(--wf-color-white);
    --wf-button-bg-color:var(--wf-color-$(val)-light-9);
    --wf-button-border-color:var(--wf-color-$(val)-light-5);

    --wf-button-hover-text-color:var(--wf-color-white);
    --wf-button-hover-bg-color:var(--wf-color-$(val));
    --wf-button-hover-border-color:var(--wf-color-$(val));

    --wf-button-active-color:var(--wf-color-white);
  }
}

.wf-button--large{
  --wf-button-size:40px;
  height: var(--wf-button-size);
  padding: 12px 19px;
  font-size: var(--wf-font-size-base);
  border-radius: var(--wf-border-radius-base);
}
.wf-button--small{
  --wf-button-size:24px;
  height: var(--wf-button-size);
  padding: 5px 11px;
  font-size: var(--wf-font-size-small);
  border-radius: calc(var(--wf-border-radius-base)-1px);
}